import { useState, useEffect } from 'react';
import { Image } from 'antd';
import CampusTitle from '@/assets/icons/ic_rj_campus2.svg';
import LogoIcon from '@/assets/icons/ai-logo-eai.svg';


// import LogoIcon1 from '@/assets/icons/logo-1.svg';
// import LogoIcon2 from '@/assets/icons/logo-2.svg';
// import LogoIcon3 from '@/assets/icons/logo-3.svg';

import { BrandingEnum } from '@/common';
import { useAppInfo } from '@/store/configStore';
import useWindowWidth from '@/hooks/event/use-window-width';
import HomeMenuList from '@/pages/components/menus/HomeMenuList';

// import { Button } from "antd"
import { useTourActions, useIsTourStart } from '@/store/tourStore';
import { useLocation } from 'react-router-dom';

// import { SvgIcon } from '@/components/icon';
// import AppManagerIcon from '@/assets/icons/rg-logo.svg';

import './logo.css'

const AppHeader = () => {
  const [logoShow, setLogoShow] = useState(false);
  const appInfo = useAppInfo();
  const { isPc } = useWindowWidth();
  const location = useLocation();
  const isTourStart = useIsTourStart();

  const { setIsTourStart } = useTourActions();

  const [isSafariSupported, setIsSafariSupported] = useState(true);

  // useEffect(()=>{
  //   setLogoShow(isTourStart);
  // }, [isTourStart])

  useEffect(() => {
    const userAgent = navigator.userAgent;
    const isSafari = /^((?!chrome|android).)*safari/i.test(userAgent);

    if (isSafari) {
      const safariVersionMatch = userAgent.match(/version\/(\d+(:?\.\d+)*)/i);
      if (safariVersionMatch && safariVersionMatch[1]) {
        const safariVersion = parseFloat(safariVersionMatch[1]);
        // 如果 Safari 版本低于 15.4，设置不支持
        if (safariVersion < 15.4) {
          setIsSafariSupported(false);
        }
      }
    }
  }, []);

  return (
    <>
      <div
        className="flex justify-between"
        style={{
          margin: '10px auto 0',
          width: '800px',
        }}
      >
        {isPc ? <></> : logoShow && <HomeMenuList />}
        <div className="flex items-center">
          <div
            className="jr-step-3 flex items-center justify-center"
            style={{
              borderRadius: '8px',
              display: 'flex',
              padding: isPc ? 'unset' : '10px 20px 0px',
            }}
          >
            <div
              style={{ paddingRight: '10px', display: 'flex' }}
              onClick={() => !isPc && setLogoShow(!logoShow)}
            >
              {appInfo &&
                appInfo?.logo ? (
                <Image src={appInfo.logo} height={35} width={35} preview={false} />
              ) : (
                <Image src={LogoIcon} height={35} width={35} preview={false} />
              )
              }
              {/* <div className="image-container">
                <Image src={LogoIcon1} width={'38px'} preview={false} />
                <Image src={LogoIcon2} width={'80px'} preview={false} />
                <Image src={LogoIcon3} width={'40px'} preview={false} />
              </div> */}
            </div>

            {appInfo &&
              (appInfo?.display_name === BrandingEnum.display_name || !appInfo?.display_name) ? (
              <Image src={CampusTitle} height={35} width={105} preview={false} />
            ) : (
              <div
                style={{
                  display: 'flex',
                  justifyContent: 'center',
                  alignItems: 'center',
                  background: isSafariSupported
                    ? 'linear-gradient(90deg, #9D00FF 9.4%, #0007FF 58.98%)'
                    : 'unset',
                  WebkitBackgroundClip: isSafariSupported ? 'text' : 'unset',
                  WebkitTextFillColor: isSafariSupported ? 'transparent' : 'unset',
                }}
              >
                <div
                  style={{
                    fontSize: '28px',
                    fontWeight: '500',
                    lineHeight: 1,
                    paddingBottom: '8px',
                    color: isSafariSupported ? 'unset' : '#4B27E3',
                    fontFamily: 'sans-serif',
                    letterSpacing: (appInfo?.display_name?.length || 0) < 3 ? '5px' : '0',
                  }}
                >
                  {appInfo?.display_name}
                </div>
              </div>
            )}
          </div>
        </div>
        {/* <img src={LogoIcon2} width={'150px'} /> */}
      </div>
    </>
  );
};

export default AppHeader;